<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/res/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: #FF5722">*</span> 图片位置</label>
        <div class="layui-input-block">
            <select name="position_id">
                {foreach $adPosition as $row}
                <option value="{$row['id']}">{$row['name']}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: #FF5722">*</span>图片标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" placeholder="请输入图片标题" lay-reqtext="请输入图片标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">链接</label>
        <div class="layui-input-block">
            <input type="text" name="url"  placeholder="请输入链接" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea type="text" name="desc"  placeholder="请输入描述" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"> 排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" placeholder="请输入排序" autocomplete="off" class="layui-input" value="100">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: #FF5722">*</span> 状态</label>
        <div class="layui-input-block">
            <input type="checkbox" checked lay-verify="required" lay-filter="status" name="status" lay-skin="switch" lay-text="启用|禁用" value="1">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: #FF5722">*</span> 图片</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <input type="hidden" name="image" id="image-url"/>
                <button type="button" class="layui-btn" id="image-upload">上传图片</button>
            </div>
        </div>
    </div>

    <div class="layui-form-item image-url">
        <label class="layui-form-label">
            &nbsp;
            <a href="javascript:;" title="点击删除">
                <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
            </a>
        </label>
        <div id="image-show"></div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" name="website_code" value="{$websiteCode}" />
        <input type="button" id="layuiadmin-app-form-submit"lay-submit lay-filter="layuiadmin-app-form-submit"  value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>
    var AD_DO_ADD_URL='{:url("ad/doAdd")}';
</script>
<script src="__STATIC__/res/layui/layui.js"></script>
<script>
    layui.config({
        base: '__STATIC__/res/' //静态资源所在路径
    }).use(['index','upload', 'form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,element = layui.element
            ,upload = layui.upload;

        uploadImage('image','{:url("ad/upload",["website_code"=>$websiteCode])}')
        function uploadImage(fieldName,uploadUrl){
            var uploadInst = upload.render({
                elem: '#'+fieldName+'-upload'
                ,url: uploadUrl
                , before: function(){
                    layer.load();
                }
                ,done: function(res){
                    if(res.result.status){
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        layer.closeAll('loading');
                        return ;
                    }

                    //上传完毕回调
                    $('#'+fieldName+'-show').html("<img src='" + res.result.data.fullPath + "' style='width:100px'>")
                    $('#'+fieldName+'-url').val(res.result.data.path)
                    $('.'+fieldName+'-url i').show()
                    layer.closeAll('loading');
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });

            $('.'+fieldName+'-url').on('click','i',function(){
                $(this).hide()
                $(this).parents('.layui-form-item').find('#'+fieldName+'-show img').remove();
                $(this).parents('.layui-form-item').prev('.layui-form-item').find('#'+fieldName+'-url').val('')
            })
        }


        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                method: 'post',
                data: field,
                url: AD_DO_ADD_URL,
                success: function (res) {
                    if (res.result.status) {
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        return
                    }
                    parent.layui.table.reload('LAY-app-content-list'); //重载表格
                    parent.layer.close(index); //再执行关闭
                }
            });
        });
    })
</script>
</body>
</html>